<template>
  <!-- 如果有 children，渲染为子菜单 -->
  <el-sub-menu
    v-if="item.children && item.children.length"
    :index="item.fullPath"
  >
    <template #title>
      <span>{{ item.meta.title }}</span>
    </template>
    <MenuItem
      v-for="child in item.children"
      :key="child.fullPath"
      :item="child"
    />
  </el-sub-menu>
  <!-- 没有 children 就是普通菜单项 -->
  <el-menu-item v-else :index="item.fullPath">
    {{ item.meta.title }}
  </el-menu-item>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true,
  },
});
</script>
